@extends('layouts.frontend-iframe-base')


@section('css')
    <style>
        #J-map-container{width:100%; height: 380px;}
    </style>
@stop

@section('content')
        <!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        我的电站
        <small>{{$site->name}}</small>
    </h1>
</section>

<!-- Main content -->
<section class="content">

    <!-- Your Page Content Here -->
    <div class="row">
        <div class="col-md-4">
            <div class="box box-widget widget-user">
                <!-- Add the bg color to the header using any of the bg-* classes -->
                <div class="widget-user-header bg-black"
                     style="background: url('{{$site->img}}') center center; height: 96px;">
                    <h3 class="widget-user-username">{{$site->name}}</h3>
                    <h5 class="widget-user-desc">{{$site->address}}</h5>
                </div>
                <div class="box-footer">
                    <div class="row">
                        <div class="col-sm-6 border-right">
                            <div class="description-block">
                                <h5 class="description-header">{{$group_count}}</h5>
                                <span class="description-text">分组</span>
                            </div>
                            <!-- /.description-block -->
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-6 border-right">
                            <div class="description-block">
                                <h5 class="description-header">{{$device_count}}</h5>
                                <span class="description-text"><a href="/frontend/site/devices?id={{$site->id}}">设备</a></span>
                            </div>
                            <!-- /.description-block -->
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
            </div>

        </div>
        <!-- /.col -->
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-aqua"><i class="fa fa-bolt"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">当前功率</span>
                            <span class="info-box-number">{{$now_power}}<small>&nbsp;kW</small></span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-green"><i class="fa fa-bolt"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">当日电量</span>
                            <span class="info-box-number">{{$today_gen_cap}}<small>&nbsp;kWh</small></span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->

                <!-- fix for small devices only -->
                <div class="clearfix visible-sm-block"></div>

                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-aqua"><i class="fa fa-bolt"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">当月电量</span>
                            <span class="info-box-number">{{$month_gen_cap}}<small>&nbsp;kWh</small></span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-green"><i class="fa fa-bolt"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">当年电量</span>
                            <span class="info-box-number">{{$year_gen_cap}}<small>&nbsp;kWh</small></span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-aqua"><i class="fa fa-bolt"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">总电量</span>
                            <span class="info-box-number">{{$total_gen_cap}}<small>&nbsp;kWh</small></span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-green"><i class="fa fa-bolt"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">发电效率</span>
                            <span class="info-box-number">0<small>&nbsp;kWh/kW/day</small></span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">发电数据</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-9">
                            <p class="text-center">
                                <strong>电站发电数据监测</strong>
                            </p>
                            <div id="echarts" style="height: 300px; width: 100%" ></div>
                            <!-- /.chart-responsive -->
                        </div>
                        <!-- /.col -->
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>请选择类型</label>

                                <div>
                                    <div class="btn-group J-type">
                                        <button type="button" class="btn btn-default active" data-type="energy">
                                            电量
                                        </button>
                                        <button type="button" class="btn btn-default" data-type="power">功率
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>请选择时间单位</label>

                                <div>
                                    <div class="btn-group J-time-type">
                                        <button type="button" class="btn btn-default" data-time-type="m">按月
                                        </button>
                                        <button type="button" class="btn btn-default active" data-time-type="d">
                                            按日
                                        </button>
                                        <button style="display: none;" type="button" class="btn btn-default" data-time-type="h">按小时
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>请选择日期范围</label>

                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <input type="text" class="form-control pull-right active" id="reservation" value="{{$begin_date}} - {{$end_date}}">
                                </div>
                                <!-- /.input group -->
                            </div>
                        </div>
                    </div>
                    <!-- /.row -->
                </div>
                <!-- ./box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>

    <div class="row">
        <div class="col-md-12">
            <div id="J-map-container">

            </div>
        </div>
    </div>

</section>
<!-- /.content -->


@stop

@section('js')
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=2ed2ee9b5023739ffff058f549999a8b"></script>
    <script>
        //显示电站在地图的位置
        $(function(){
            var map = new AMap.Map('J-map-container');
            map.setZoom(10);
            map.setCenter([{{$site->position_lon}}, {{$site->position_lat}}]);

            var marker = new AMap.Marker({
                position: [{{$site->position_lon}}, {{$site->position_lat}}],
                map:map
            });

            var infowindow = new AMap.InfoWindow({
                content: '<h3 class="title">{{$site->name}}</h3><div>地址：{{$site->address}}</div>',
                offset: new AMap.Pixel(0, -30),
                size:new AMap.Size(230,0)
            });
            infowindow.open(map,marker.getPosition());

            var clickHandle = AMap.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker.getPosition())
            });

            AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){
                var toolBar = new AMap.ToolBar();
                var scale = new AMap.Scale();
                map.addControl(toolBar);
                map.addControl(scale);
            });

        });
    </script>

    <script>


        $('#reservation').daterangepicker({
            format: 'YYYY-MM-DD'
        });

        $('#reservation').on('change', function () {
            loadData();
        });

        var myChart = echarts.init(document.getElementById('echarts'));

        option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis',

                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            }
        };

        $('.J-type button').click(function () {
            $(this).parent().find('button').removeClass('active');
            $(this).addClass('active');
            if ($(this).data('type') == 'energy') {
                $('.J-time-type button').each(function () {
                    $(this).removeClass('active');
                    if ($(this).data('time-type') == 'h') {
                        $(this).hide();
                    }
                    if ($(this).data('time-type') == 'd') {
                        $(this).addClass('active');
                    }
                });

            }
            if ($(this).data('type') == 'power') {
                $('.J-time-type button').each(function () {
                    if ($(this).data('time-type') == 'h') {
                        $(this).show();
                    }
                });
            }

            loadData();
        });
        $('.J-time-type button').click(function () {
            $(this).parent().find('button').removeClass('active');
            $(this).addClass('active');
            loadData();
        });


        function loadData() {
            var params = getDataParams();
            params.id = '{{$site->id}}';
            myChart.showLoading();
            $.get('/frontend/site/energy-data', params, function (res) {
                if (res.status != 1) {
                    alert(res.error_msg);
                    return;
                }
                var opt= $.extend(true,{},option,{
                    xAxis:{
                        data:res.data.labels
                    },
                    series: [{
                        name: '发电量（kWh）',
                        type: 'line',
                        showSymbol: false,
                        hoverAnimation: false,
                        data: res.data.data
                    }]
                });
                myChart.setOption(opt);
                myChart.hideLoading();
            }, 'json');
        }

        function getDataParams() {
            var start = $('#reservation').data('daterangepicker').startDate.format('YYYY-MM-DD');
            var end = $('#reservation').data('daterangepicker').endDate.format('YYYY-MM-DD');
            var params = {
                start: start,
                end: end,
                type: $('J-type').find('.active').data('type'),
                time_type: $('J-time-type').find('.active').data('time-type')
            };
            return params;
        }

        function getDataParams() {
            var start = $('#reservation').data('daterangepicker').startDate.format('YYYY-MM-DD');
            var end = $('#reservation').data('daterangepicker').endDate.format('YYYY-MM-DD');
            var params = {
                start: start,
                end: end,
                type: $('.J-type').find('.active').data('type'),
                time_type: $('.J-time-type').find('.active').data('time-type')
            };
            return params;
        }

        loadData();









    </script>
@stop